<template>
  <el-dialog
    title="预览视频"
    :visible="show"
    width="540px"
    :modal-append-to-body="true"
    :append-to-body="true"
    @close="$emit('update:show',false)"
  >
    <video
      v-show="show"
      id="video"
      ref="video"
      class="video-js vjs-default-skin source"
      controls
      playsinline
    >
      <source v-if="ismp4" :src="videoUrl" type="video/mp4">
      <source v-else :src="videoUrl" type="application/x-mpegURL">
    </video>
  </el-dialog>
</template>
<script>
import Videojs from 'video.js' // 引入Videojs
export default {
  props: ['videoUrl', 'show', 'ismp4'],
  data() {
    return {
      player: {},
      options: {
        autoplay: true, // 设置自动播放
        muted: false, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
        preload: 'auto', // 预加载
        controls: true // 显示播放的控件
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getVideo()
    })
  },
  destroyed() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    getVideo() {
      this.player = Videojs('video', this.options)
    }
  }
}
</script>

<style>
#video{
  width: 100%;
  height: 880px;
}

.source{

}
</style>
